<template>
    <div>
        <div class="header">
            <p class="title">todos</p><br>
            <input class="new-todo" type="text" placeholder="请填写任务" v-model.trim="name" @keyup.enter="enterName" />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue' 
const name = ref('') 

const emit = defineEmits(['addTodo']) 


 const enterName = () => { 
     emit('addTodo', name.value) 
     name.value = '' 
  } 
</script>

<style  scoped>
.header {
  text-align: center;
  margin: 50px 0 20px;
}
.header .title {
  font-size: 100px;
  font-weight: 100;
  color: #c14141;
  margin: 20px 0;
}
.new-todo {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  color: inherit;
  padding: 16px 16px 16px 60px;
  border-bottom: 1px solid #e6e6e6;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  /* font-smoothing: antialiased; */
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}
.new-todo::placeholder {
  color: #e6e6e6;
  font-style: italic;
}
</style>